import React ,{Component,Proptypes} from "react";
import { render } from 'react-dom';
export default class Tabs extends Component{
    constructor(props){
        super(props);
        this.state={
            tabs:[
                {tabName:"首页",id:0},
                {tabName:"品牌优势",id:1},
                {tabName:"加盟合作",id:2},
                {tabName:"关于我们",id:3},
                {tabName:"新闻快讯",id:4},
                {tabName:"产品展示",id:5},                
                {tabName:"诚聘英才",id:6}                                            
            ],
            currentIndex:0
        }
    }
     componentDidMount() {
        
    }
    tabChooseId(id){
        // console.log(id)
        //tab切换
        this.setState({
            currentIndex:id
        })
        console.log(this.state.currentIndex)
    }
   
    render(){
        var show1=this.state.currentIndex==0?"block":"none"
        var show2=this.state.currentIndex==1?"block":"none"
        var show3=this.state.currentIndex==2?"block":"none"
        var show4=this.state.currentIndex==3?"block":"none"
        var show5=this.state.currentIndex==4?"block":"none"
        var show6=this.state.currentIndex==5?"block":"none"
        var show7=this.state.currentIndex==6?"block":"none"
        
        
        return (
            <div className={classNames.container}>
                <ul className={classNames.listCont}>
                {this.state.tabs.map((v,i)=>{
                   return(
                       <li key={i} onClick={e=>this.tabChooseId(v.id)} id={v.id}><a href="javascript:void(0)">{v.tabName}</a></li>
                   )                   
                })}
                </ul>
                <div className="newsList">
                    <div style={{display:show1}} >
                        首页首页首页首页
                    </div>
                    <div style={{display:show2}} >
                        品牌优势品牌优势品牌优势
                    </div>
                    <div style={{display:show3}} >
                        加盟合作加盟合作加盟合作
                    </div>
                    <div style={{display:show4}} >
                        关于我们关于我们关于我们
                    </div>

                    <div style={{display:show5}} >
                        新闻快讯新闻快讯新闻快讯新闻快讯
                    </div>
                     <div style={{display:show6}} >
                        产品展示产品展示产品展示产品展示
                    </div>
                     <div style={{display:show7}} >
                        诚聘英才诚聘英才诚聘英才
                    </div>
                </div>
            </div>
        )
    }
}
const classNames={
    container:"navContainer",
    listCont:"navListCont"
}